{% extends '__base__.html' %}

{% block title %}Demo{% endblock %}
{% block beforehead %}
{% endblock %}
{% block content %}
<!-- Content Header (Page header) -->

<section class="content-header">
    <h1>
        Demo
        <small>Demo</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Demo</li>
    </ol>
</section>

<div class="container" id="main">
    <router-view></router-view>
</div>

</div>
{% endblock %}

{% block beforebody %}
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
<script src="/static/main.js"></script>
<script>
    const index = {
        components: {
            'pagination': component('/static/pagination.vue'),
            'list': component('/static/list.vue'),
            'operation': component('/static/operation.vue'),
            'navigation_list': component('/static/navigation_list.vue'),
        },
        template: `
            <navigation_list :path="path" @path-to="pathTo" @mkdir="mkdir" @newOne="newOne"></navigation_list>
            <list :items="items" @view="view" @select="select" :selectItems="selectItems"></list>
            <pagination :page="page" @load-items="loadItems"></pagination>
            <operation
                :show="selectItems.length > 0"
                @delete-items="deleteItems"
                @export-items="exportItems"
                @import-items="importItems"
                @close="selectItems = []">
            </operation>
        `,
        props: ['path_'],
        data() {
            return {
                page: {'total': 36, 'pages': 3, 'index': 1, 'size': 12},
                path: '/abc/cde/fgh',
                items: [
                    {
                        id: 1,
                        path: '/',
                        name: 'test',
                        content_type: '-',
                        author: 'guest',
                        updated_at: '2021-12-25 23:24:00'
                    },
                    {
                        id: 2,
                        path: '/',
                        name: 'test1',
                        content_type: '-',
                        author: 'guest',
                        updated_at: '2021-12-25 23:24:00'
                    },
                    {
                        id: 3,
                        path: '/',
                        name: 'test3',
                        content_type: 'd',
                        author: 'guest',
                        updated_at: '2021-12-25 23:24:00'
                    },
                ],
                selectItems: [],
            }
        },
        mounted() {
            this.path = '/'
            if (this.path_) {
                this.path = this.path_
            }
            this.loadItems(1)
        },
        methods: {
            pathTo(path) {
                console.log('pathTo', path)
                this.path = path
                this.loadItems(1)
            },
            mkdir(path) {
                console.log('mkdir', path)
                if (!path || path.length <= 0 || path === '/') return
                axios.post('/blog/mkdir', {
                        path: path
                    })
                    .then(
                        response => {
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    this.pathTo(path)
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                    layer.msg(data['msg'])
                                }
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
                this.path = path
            },
            newOne(path) {
                console.log('newOne', path)
                this.$router.push({name: 'edit', path: '/edit/:id', params: {id: -1, path: (path.endsWith('/') ? path  : path + '/') + 'Undefined' }})
            },
            loadItems(index) {
                console.log('loadItems', index)
                axios.get('/blog/page', {
                        params: {
                            index: index,
                            pagesize: this.page.size,
                            path: this.path,
                        }
                    })
                    .then(
                        response => {
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    this.items = data['msg']['items'] ? data['msg']['items'] : this.items
                                    this.page = data['msg']['page'] ? data['msg']['page'] : this.page
                                    this.path = data['msg']['path']
                                    this.selectItems = []
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                }
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            view(item) {
                let path = (item.path.endsWith('/') ? item.path : (item.path + '/')) + item.name
                if (item.content_type === 'd') {
                    this.pathTo(path)
                } else {
                    console.log('view', item.path, item.id)
                    this.$router.push({name: 'view', path: '/view/' + item.id, params: {id: item.id}})
                    // this.$router.push({name: 'view', path: '/view/' + this.id, params: {}})
                }
            },
            select(selectItems) {
                // console.log('select', selectItems, selectItems.length)
                this.selectItems = selectItems
            },
            deleteItems() {
                console.log('deleteItems', this.selectItems)
            },
            importItems() {
                console.log('importItems', this.selectItems)
            },
            exportItems() {
                console.log('exportItems', this.selectItems)
            },
        }
    }

    const view = {
        components: {
            'navigation_view': component('/static/navigation_view.vue'),
            'view_blog': component('/static/view_blog.vue'),
        },
        template: `
            <navigation_view :path="path" @path-to="pathTo"></navigation_view>
            <view_blog :item="item"></view_blog>
        `,
        props: ['id'],
        data() {
            return {
                item: {},
                path: '/'
            }
        },
        mounted() {
            console.log(this.path, this.id)
            this.loadItem()
        },
        methods: {
            pathTo(path) {
                console.log('pathTo', path)
                if (path !== this.path) {
                    console.log('pathTo', path)
                    this.$router.push({name: 'index', path: '/', params: {path: path}})
                }
            },
            loadItem() {
                if (!this.id) return
                axios.get('/blog/item', {
                        params: {
                            id: this.id
                        }
                    })
                    .then(
                        response => {
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    this.item = data['msg']['item']
                                    let path = (this.item.path.endsWith('/') ? this.item.path : (this.item.path + '/')) + this.item.name
                                    this.path = path
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                    layer.msg(data['msg'])
                                }
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
    }

    const edit = {
        components: {
            'navigation_edit': component('/static/navigation_edit.vue'),
            'edit_blog': component('/static/edit_blog.vue'),
        },
        template: `
            <navigation_edit :path="path" @path-to="pathTo" @save="save"></navigation_edit>
            <edit_blog :item="item" @name="name" @text="text" @summary="summary"></edit_blog>
        `,
        props: ['id', 'path'],
        data() {
            return {
                item: {},
                // path: '/',
                name_: '',
                text_: '',
                summary_: '',
            }
        },
        mounted() {
            console.log(this.path, this.id)
            this.loadItem()
        },
        watch: {
        },
        methods: {
            name(newVal) {
                this.name_ = newVal
                this.item.name = newVal
            },
            text(newVal) {
                this.text_ = newVal
                this.item.content = newVal
            },
            summary(newVal) {
                this.summary_ = newVal
                this.item.summary = newVal
            },
            pathTo(path) {
                console.log('pathTo', path)
                if (path === this.path) {
                    this.$router.push({name: 'view', path: '/view/' + this.id, params: {}})
                } else {
                    this.$router.push({name: 'index', path: '/', params: {path: path}})
                }
            },
            loadItem() {
                if (this.id < 0) return
                axios.get('/blog/item', {
                        params: {
                            id: this.id
                        }
                    })
                    .then(
                        response => {
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    this.item = data['msg']['item']
                                    let path = (this.item.path.endsWith('/') ? this.item.path : (this.item.path + '/')) + this.item.name
                                    this.path = path
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                    layer.msg(data['msg'])
                                }
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            save() {
                console.log(this.item.id, this.name_, this.summary_, this.text_)
            }
        },
    }

    const routes = [
        {
            path: '/',
            name: 'index',
            component: index,
            props: resp => ({path_: resp.params.path})
        },
        {
            path: '/view/:id',
            name: 'view',
            component: view,
            props: resp => ({id: resp.params.id})
        },
        {
            path: '/edit/:id',
            name: 'edit',
            component: edit,
            props: resp => ({id: resp.params.id, path: resp.params.path})
        }
    ]

    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
    })
    const app = Vue.createApp({})
    // const app = Vue.createApp(index);
    //整个应用支持路由。
    app.use(router)
    // mount方法返回根组件实例
    app.mount('#main');

  </script>
{% endblock %}